/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

// Some mixins that help us deal with browser scaling of text more consistently.
// Essentially, fonts across oui should scale against the root html element, not
// against parent inheritance.

// Typography mixins

@function convertToRem($size) {
  @return #{calc($size / $ouiFontSize)}rem;
}

// Spit out rem and px
@mixin fontSize($size: $ouiFontSize) {
  font-size: $size;
  font-size: convertToRem($size);
}

// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
// EX: A proper line-height for text is 1.5 times the font-size.
//     If our base font size (ouiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
// To maintain v7 line-heights, $ouiFontSize is replaced with 16px
@function lineHeightFromBaseline($multiplier: 3) {
  //@return convertToRem(calc(16px/2)*$multiplier);
  @return convertToRem(calc($ouiFontSize/2)*$multiplier);
}
@mixin lineHeightFromBaseline($multiplier: 3) {
  line-height: lineHeightFromBaseline($multiplier);
}

// sass-lint:disable quotes
$ouiFontFamily: #{"'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default;
$ouiCodeFontFamily: #{"'Source Code Pro', Consolas, Menlo, Courier, monospace"} !default;
// sass-lint:enable quotes

// Careful using ligatures. Code editors like ACE will often error because of width calculations
$ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;

// Font sizes -- scale is loosely based on Major Third (1.250)
$ouiTextScale:      2, 1.714286, 1.285714, 1.1429, 1, .857143, .75 !default;

$ouiFontSize:       14px !default; // 5th position in scale
$ouiFontSizeXS:     $ouiFontSize * nth($ouiTextScale, 6) !default; // 12px
$ouiFontSizeS:      $ouiFontSize * nth($ouiTextScale, 5) !default; // 14px
$ouiFontSizeM:      $ouiFontSize * nth($ouiTextScale, 4) !default; // 16px
$ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 18px
$ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 24px
$ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 28px

// This value is impacted by font-size
$ouiLegibilityMaxWidth: 80ch !default;

// Line height
$ouiLineHeight:     1.5 !default;
$ouiBodyLineHeight: 1 !default;

// Font weights
$ouiFontWeightLight:        400 !default;
$ouiFontWeightRegular:      400 !default;
$ouiFontWeightMedium:       500 !default;
$ouiFontWeightSemiBold:     500 !default;
$ouiFontWeightBold:         500 !default;
$ouiCodeFontWeightRegular:  400 !default;
$ouiCodeFontWeightBold:     700 !default;

// Titles map
// Lists all the properties per OuiTitle size that then gets looped through to create the selectors.
// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
$ouiTitles: (
  // h6: 14px / 17px / 500
  'xxxs': (
    'font-size': $ouiFontSizeS,
    'line-height': lineHeightFromBaseline(2.4286),
    'font-weight': $ouiFontWeightMedium,
  ),
  // h5: 14px / 17px / 500
  'xxs': (
    'font-size': $ouiFontSizeS,
    'line-height': lineHeightFromBaseline(2.4286),
    'font-weight': $ouiFontWeightMedium,
  ),
  // h4: 16px / 19px / 500
  'xs': (
    'font-size': $ouiFontSizeM,
    'line-height': lineHeightFromBaseline(2.7143),
    'font-weight': $ouiFontWeightMedium,
  ),
  // h3: 18px / 22px / 500
  's': (
    'font-size': $ouiFontSizeL,
    'line-height': lineHeightFromBaseline(3.1429),
    'font-weight': $ouiFontWeightMedium,
  ),
  // h2: 24px / 29px / 400
  'm': (
    'font-size': $ouiFontSizeXL,
    'line-height': lineHeightFromBaseline(4.1429),
    'font-weight': $ouiFontWeightRegular,
  ),
  // h1: 28px / 34px / 400
  'l': (
    'font-size': $ouiFontSizeXXL,
    'line-height': lineHeightFromBaseline(4.857),
    'font-weight': $ouiFontWeightRegular,
  ),
) !default;


/* OUI -> EUI Aliases */
$euiFontFamily: $ouiFontFamily;
$euiCodeFontFamily: $ouiCodeFontFamily;
$euiFontFeatureSettings: $ouiFontFeatureSettings;
$euiTextScale: $ouiTextScale;
$euiFontSize: $ouiFontSize;
$euiFontSizeXS: $ouiFontSizeXS;
$euiFontSizeS: $ouiFontSizeS;
$euiFontSizeM: $ouiFontSizeM;
$euiFontSizeL: $ouiFontSizeL;
$euiFontSizeXL: $ouiFontSizeXL;
$euiFontSizeXXL: $ouiFontSizeXXL;
$euiLegibilityMaxWidth: $ouiLegibilityMaxWidth;
$euiLineHeight: $ouiLineHeight;
$euiBodyLineHeight: $ouiBodyLineHeight;
$euiFontWeightLight: $ouiFontWeightLight;
$euiFontWeightRegular: $ouiFontWeightRegular;
$euiFontWeightMedium: $ouiFontWeightMedium;
$euiFontWeightSemiBold: $ouiFontWeightSemiBold;
$euiFontWeightBold: $ouiFontWeightBold;
$euiCodeFontWeightRegular: $ouiCodeFontWeightRegular;
$euiCodeFontWeightBold: $ouiCodeFontWeightBold;
$euiTitles: $ouiTitles;
/* End of Aliases */
